<template>
  <div>
    <div :class="$style.header">
      <span :class="$style.title">单据号：</span>
      <span :class="$style.value">{{ craftHeadData.taskNo }}</span>
    </div>

    <div :class="$style.wrap">
      <a-row :class="$style.craftHeadInfo">
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">创建人：</span>
          <span :class="$style.value">{{ craftHeadData.creator }}</span>
        </a-col>
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">联系方式：</span>
          <span :class="$style.value">{{ craftHeadData.creatorPhone }}</span>
        </a-col>
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">单据类型：</span>
          <span :class="$style.value">{{
            relationType[craftHeadData.sheetType]
          }}</span>
        </a-col>
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">品牌：</span>
          <span :class="$style.value">{{ craftHeadData.brandName }}</span>
        </a-col>
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">产品名称：</span>
          <span :class="$style.value">{{ craftHeadData.productName }}</span>
        </a-col>
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">款号：</span>
          <span :class="$style.value">{{ craftHeadData.skcNo }}</span>
        </a-col>
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">CP 号：</span>
          <span :class="$style.value">{{ craftHeadData.cpNo }}</span>
        </a-col>
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">一级分类：</span>
          <span :class="$style.value">{{ craftHeadData.sortName }}</span>
        </a-col>
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">版本号：</span>
          <span :class="$style.value">{{ craftHeadData.cversion }}</span>
        </a-col>
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">创建时间：</span>
          <span :class="$style.value">{{ craftHeadData.createTime }}</span>
        </a-col>
        <a-col :class="$style.col" :span="8">
          <span :class="$style.label">报价截止时间：</span>
          <span :class="$style.value">{{ craftHeadData.taskEndTime }}</span>
        </a-col>
      </a-row>

      <div :class="$style.status">
        状态：{{ statusList[craftHeadData.status] }}
      </div>
    </div>
  </div>
</template>

<script>
import { quotedStatus, relationType } from '../../../types'

export default {
  data() {
    return {
      quotedStatus,
      statusList: {
        10: '待报价',
        20: '报价中',
        100: '已报价',
        30: '已驳回',
        40: '已关闭',
        50: '超时'
      },
      relationType,
      craftHeadData: {}
    }
  },
  mounted() {
    this.getCraftHeadInfo({
      taskId: this.$route.query.taskId
    })
  },
  methods: {
    async getCraftHeadInfo({ taskId }) {
      const res = await this.$api.quotation.quoteHead({ taskId })

      this.craftHeadData = res
    }
  }
}
</script>

<style lang="less" module>
@import './header.less';
</style>
